<template>
    <div class="common-layout">
        <el-container>
            <el-header>

                <h1>LTX体检报告与健康管理系统</h1>
                <p>医生:{{ username }}</p>

            </el-header>
            <el-container>
                <el-aside width="260px">

                    <el-descriptions class="margin-top" title="预约客户信息" :column="1" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">预约编号</div>
                            </template>
                            {{ userorder.orderid }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">手机号码</div>
                            </template>
                            {{ userorder.userid }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">真实姓名</div>
                            </template>
                            {{ userorder.realname }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">性别</div>
                            </template>
                            {{ userorder.sex == 1 ? '男' : '女' }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">套餐类型</div>
                            </template>
                            {{ userorder.sname }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">体检日期</div>
                            </template>
                            {{ userorder.orderdate }}
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-button type="primary" style="margin-top: 20px" @click="toOrdersList">查询体检用户</el-button>

                </el-aside>
                <el-main>
                    <div class="demo-collapse">
                        <el-collapse>
                            <el-collapse-item :title="ci.ciname" v-for="(ci, ciIndex) in ciReportArr" :key="ci.crid">
                                <el-row style="color: #888">
                                    <el-col :span="12" style="box-sizing: border-box; padding: 6px 10px"
                                        v-for="(cidr, cidrIndex) in ci.cidetailedreports" :key="cidr.crid">
                                        <span style="
                                                background-color: #ba634e;
                                                color: #fff;
                                                border: 1px solid #ba634e;
                                                box-sizing: border-box;
                                                padding: 1px 3px;
                                                border-radius: 3px;  
                                                    margin-right: 5px;
                                                " v-if="cidr.iserror == 1">异</span>
                                        <span style="margin-right: 5px; vertical-align: top">{{
                                            cidr.name
                                        }}</span>

                                        <el-input style="width: 26%; margin-right: 2px" size="small"
                                            :placeholder="cidr.value" v-if="cidr.type != 4"
                                            v-model="ciReportArr[ciIndex].cidetailedreports[cidrIndex].value"
                                            @blur="cidrCheckByBlur(ciIndex, cidrIndex)" />
                                        <el-input style="width: 80%" type="textarea" :rows="2" :placeholder="cidr.value"
                                            v-model="ciReportArr[ciIndex].cidetailedreports[cidrIndex].value"
                                            v-if="cidr.type == 4" />
                                        <span style="margin-right: 15px">{{ cidr.unit }}</span>
                                        <span v-if="cidr.normalvaluestring">正常值范围: {{ cidr.normalvaluestring }}</span>
                                    </el-col>
                                </el-row>
                                <el-button type="primary" style="margin-top: 8px" @click="addveluse(ciIndex)"
                                    v-if="orders.state == 2">{{ ci.ciname
                                    }}项保存</el-button>
                            </el-collapse-item>

                            <el-card class="box-card" style="margin-top: 20px">
                                <template #header>
                                    <div class="card-header">
                                        <span>总检结论</span>
                                        <el-button class="button" type="danger" @click="updateOrdersState"
                                            v-if="orders.state == 2">体检套餐总检结果报告归档</el-button>
                                    </div>
                                </template>
                                <div>
                                    <el-table :data="overallResultArr" style="width: 100%">
                                        <el-table-column prop="orid" label="编号" width="60" />
                                        <el-table-column prop="title" label="总检结论项标题" width="180" />
                                        <el-table-column prop="content" label="总检结论项内容" />
                                        <el-table-column label="操作" width="160">
                                            <template #default="scope">
                                                <el-button type="text" size="small"
                                                    @click="updateOverallResult(scope.row)"
                                                    v-if="orders.state == 2">更新</el-button>
                                                <el-button type="text" size="small"
                                                    @click="deleteverallResult(scope.row)"
                                                    v-if="orders.state == 2">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>

                                    <el-form ref="formRef" :model="overallResultForm" style="margin-top: 20px"
                                        label-width="120px" v-if="orders.state == 2">
                                        <el-form-item label="总检结论标题">
                                            <el-input v-model="overallResultForm.title" placeholder="总检结论标题"></el-input>
                                        </el-form-item>
                                        <el-form-item label="总检结论内容">
                                            <el-input v-model="overallResultForm.content" :rows="2" type="textarea"
                                                placeholder="总检结论内容"></el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" @click="addoVerallresult">添加</el-button>
                                            <el-button type="warning" @click="resetOverallResult">清空</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-card>
                        </el-collapse>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { getSessionStorage } from '../router/common'
import axios from '../router/axios';
export default {
    setup() {
        const route = useRoute();
        const router = useRouter();
        const state = reactive({
            iserror: 0,
            username: getSessionStorage('doctor').realname,
            userorder: {
                hanme: route.query.hanme,
                orderdate: route.query.orderdate,
                orderid: route.query.orderid,
                realname: route.query.realname,
                sex: route.query.sex,
                smid: route.query.mid,
                sname: route.query.sname,
                userid: route.query.userid,
            },
            overallResultForm: {
                title: "",
                content: ""
            },
            orders: {
                state: route.query.state,
            },
            ciReportArr: [],
            overallResultArr: [
                {
                    orid: "",
                    title: "",
                    content: ""
                }
            ]
        })
        getReportTemplate()
        function getReportTemplate() {
            axios.get('/api/doctor/getReportTemplate', {
                params: {
                    orderId: route.query.orderid,
                }
            })
                .then(function (response) {
                    // 成功处理
                    const result = response.data;
                    console.log(result.data)
                    if (result.code == 1) {
                        state.ciReportArr = result.data;
                        console.log(state.ciReportArr)
                    }
                })
                .catch(function (error) {
                    // 错误处理
                    console.log(error);
                })
                .finally(function () {
                    // 总是执行
                });
        }
        function addveluse(addveluse) {
            for (let i = 0; i < state.ciReportArr[addveluse].cidetailedreports.length; i++) {
                if(state.ciReportArr[addveluse].cidetailedreports[i].type == 1){
                    if (state.ciReportArr[addveluse].cidetailedreports[i].value > state.ciReportArr[addveluse].cidetailedreports[i].maxrange || state.ciReportArr[addveluse].cidetailedreports[i].value < state.ciReportArr[addveluse].cidetailedreports[i].minrange) {
                        state.iserror = 1; 
                    }
                }else if(state.ciReportArr[addveluse].cidetailedreports[i].type == 2){
                    if (state.ciReportArr[addveluse].cidetailedreports[i].value!= state.ciReportArr[addveluse].cidetailedreports[i].normalvalue) {
                        state.iserror = 1;
                    }
                }else{
                    state.iserror = 0;
                }
                axios.post('/api/doctor/updatavValue', {
                    cidrid: state.ciReportArr[addveluse].cidetailedreports[i].cidrid,
                    value: state.ciReportArr[addveluse].cidetailedreports[i].value,
                    iserror: state.iserror,
                })
                    .then(function (response) {
                        console.log(response);
                        
                    })
                    .catch(function (error) {
                        // 错误处理
                        console.log(error);
                    })
                    .finally(function () {
                        // 总是执行
                    });
            }
        }
        function addoVerallresult() {
            axios.post('/api/doctor/overallresult/addOverallresult', {
                orderid: route.query.orderid,
                title: state.overallResultForm.title,
                content: state.overallResultForm.content
            })
                .then(function (response) {
                    const result = response.data;
                    console.log(result);
                    if (result.code == 1) {
                        alert('总检结果报告添加成功')
                        getoVerallresult()
                        state.overallResultForm.title = "";
                        state.overallResultForm.content = "";
                    }
                })
                .catch(function (error) {
                    // 错误处理
                    console.log(error);
                })
                .finally(function () {
                    // 总是执行
                });
        }
        getoVerallresult()
        function getoVerallresult() {
            axios.get('/api/doctor/overallresult/getAllOverallresult', {
                params: {
                    orderid: route.query.orderid,
                }
            })
                .then(function (response) {
                    // 成功处理
                    const result = response.data;
                    console.log(result);
                    if (result.code == 1) {
                        state.overallResultArr = result.data;
                    }
                })
                .catch(function (error) {
                    // 错误处理
                    console.log(error);
                })
                .finally(function () {
                    // 总是执行
                });
        }
        function resetOverallResult() {
            state.overallResultForm.title = "";
            state.overallResultForm.content = "";
        }
        function deleteverallResult(row) {
            console.log(row.orid);
            axios.delete('/api/doctor/overallresult/deleteOverallresult', {
                params: {
                    orid: row.orid,
                }
            })
                .then(function (response) {
                    // 成功处理
                    const result = response.data;
                    console.log(result);
                    if (result.code == 1) {
                        getoVerallresult()
                    }
                })
                .catch(function (error) {
                    // 错误处理
                    console.log(error);
                })
                .finally(function () {
                    // 总是执行
                });
        }
        function updateOrdersState() {
            // /doctor/orders/updatestate
            axios.post('/api/doctor/orders/updatestate', {
                orderid: route.query.orderid,
                state: 3,
            })
                .then(function (response) {
                    const result = response.data;
                    console.log(result);
                    if (result.code == 1) {
                        alert('总检结果报告归档成功')
                        router.push('/orderlist')
                    }else{
                        alert(result.msg) 
                    }
                })
                .catch(function (error) {
                    // 错误处理
                    console.log(error);
                })
                .finally(function () {
                    // 总是执行
                });

        }
        function updateOverallResult(row) {
            state.overallResultForm.title = row.title;
            state.overallResultForm.content = row.content;
            deleteverallResult(row);
            

        }
        function toOrdersList() {
            router.push('/orderlist')
        }
        return {
            ...toRefs(state),
            toOrdersList,
            addveluse,
            addoVerallresult,
            resetOverallResult,
            deleteverallResult,
            updateOrdersState,
            updateOverallResult
        }
    }
}
</script>

<style scoped>
.common-layout {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

.el-container {
    flex: 1;
    overflow: hidden;
}

.el-main {
    overflow-y: auto;
    height: 100%;
    padding: 20px;
    background-color: #fff;
}

.el-header {
    background-color: #1c51a3;
    color: #fff;
    height: 80px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.el-header h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.el-aside {
    background-color: #f5f7fa;
    padding: 20px;
    border-right: 1px solid #e6e6e6;
}

.el-main {
    padding: 20px;
    background-color: #fff;
}

/* 简化折叠面板样式 */
.el-collapse {
    border: none;
}

.el-collapse-item {
    margin-bottom: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.el-collapse-item__header {
    background-color: #f5f7fa;
    padding: 0 20px;
    font-weight: 500;
}

/* 简化检查项样式 */
.el-row {
    margin: 10px 0;
}

.el-col {
    padding: 10px 15px;
    margin-bottom: 8px;
    background: transparent;
}

/* 简化卡片样式 */
.box-card {
    margin-top: 20px;
    border: none;
    box-shadow: none;
}

.card-header {
    padding: 0;
    border-bottom: none;
}

/* 异常标签样式 */
.abnormal-tag {
    background-color: #ba634e;
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 8px;
    font-size: 12px;
}
</style>